<template>
  <drag-modal
    title="编辑"
    :width="450"
    :visible="visible"
    :destroyOnClose="true"
    :confirmLoading="submitLoading"
    :maskClosable="false"
    @ok="ok"
    @cancel="cancel"
  >
    <a-spin :spinning="loading">
      <a-form-model :model="form" ref="form" :rules="validatorRules" :label-col="{span: 5}" :wrapperCol="{span: 16, offset: 1}">
        <div class="fold">
          <a-form-model-item
            label="所属机构"
            prop="organizationId"
          >
            <a-tree-select
              show-search :filterTreeNode="filterTreeNode" 
              v-model="form.organizationId"
              style="width: 100%"
              :dropdown-style="{ maxHeight: '300px', overflow: 'auto' }"
              :tree-data="organizationTreeData"
              :tree-default-expand-all="true"
              :getPopupContainer="(triggerNode)=>{ return triggerNode.parentNode}"
            >
              <template slot="title" slot-scope="item">
                <span v-if="item.type == 0"><a-icon type="bank" /> {{item.customTitle}} </span>
                <span v-else-if="item.type == 1"><a-icon type="shop" /> {{item.customTitle}} </span>
                <span v-else-if="item.type == 2"><a-icon type="apartment" /> {{item.customTitle}} </span>
                <span v-else><a-icon type="question-circle" /> {{item.customTitle}} </span>
              </template>
            </a-tree-select>
          </a-form-model-item>
          <a-form-model-item
            label="角色名称"
            prop="name"
          >
            <a-input allowClear v-model="form.name" />
          </a-form-model-item>
          <a-form-model-item
            label="备注"
            prop="remarks"
          >
            <a-textarea allowClear v-model="form.remarks" :auto-size="{ minRows: 3, maxRows: 3 }" />
          </a-form-model-item>
          <a-form-model-item
            label="状态"
            prop="status"
          >
            <a-select allowClear v-model="form.status" :getPopupContainer="(triggerNode)=>{ return triggerNode.parentNode}">
              <a-select-option v-for="item in dict.status" :key="item.key" :value="item.value">{{item.title}}</a-select-option>
            </a-select>
          </a-form-model-item>
        </div>
      </a-form-model>
    </a-spin>
  </drag-modal>
</template>

<script>
import {roleService} from '@/services'

export default {
  name: 'EditModal',
  props: {
    visible: {
      type: Boolean,
      required: true
    }
  },
  data () {
    return {
      loading: false,
      submitLoading: false,
      organizationTreeData: [],
      form: {
        organizationId: undefined,
        name: undefined,
        remarks: undefined,
        status: undefined
      },
      validatorRules: {
        organizationId: [
          { required: true, message: '请选择组织机构', trigger: 'change' }
        ],
        name: [
          { required: true, message: '请输入角色名称', trigger: 'blur' }
        ],
        status: [
          { required: true, message: '请选择状态', trigger: 'change' }
        ]
      },
      dict: {
        status: []
      }
    }
  },
  methods: {
    cancel() {
      this.$emit('cancel')
    },
    ok() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.submitLoading = true
          roleService.edit(JSON.stringify(this.form)).then(res => {
            const result = res.data
            if (result.code === 200) {
              this.$emit('ok')
              this.$message.success(result.msg)
            }
          }).finally(this.submitLoading = false)
        }
      })
    },
    filterTreeNode(input, treeNode) {
      return treeNode.data.props.customTitle.includes(input)
    },
    queryAction(val) {
      this.loading = true
      const params = {
        id: val
      }
      roleService.query(JSON.stringify(params)).then(res => {
        const result = res.data
        if (result.code === 200) {
          this.form = result.data
        }
      }).finally(this.loading = false)
    },
    queryOrganizationTreeAction() {
      this.loading = true
      roleService.queryOrganizationTree().then(res => {
        const result = res.data
        if (result.code === 200) {
          this.organizationTreeData = result.data
        }
      }).finally(this.loading = false)
    }
  },
  mounted() {
    this.getDict(JSON.stringify({code: 'SYS_STATUS'})).then(res => this.dict.status = res.data.data)
  }
}
</script>
